<template>
  <view  class="content">
	  <view v-for="(item, index) in cartData" :key="index" class="shuju">
		  <uni-card>
			  <view style="display: flex;flex-direction: row;">
			  	<view >
			  		<image style="width: 80px;height: 100px;" :src='item.goods.imgUrl' mode=""></image>
			  	</view>
			  			  		<view>
									<view style="width: 150px;" >
										<text style="color: black;font-weight: bold;font-size: 20px;margin-left: 10px;">{{item.goods.name}}</text>
									</view>
			  			  			<view style="margin-top: 10px;margin-left: 10px;">
										<text style="font-size: 18px;" v-if="item.size==='L'">规格：小杯</text>
										<text style="font-size: 18px;" v-if="item.size==='M'">规格：中杯</text>
			  			  				<text style="font-size: 18px;" v-if="item.size==='S'">规格：大杯</text>
			  			  			</view>
			  			  			<view style="margin-top: 10px;margin-left: 10px;" >
			  			  				<text style="font-size: 18px;">备注：{{item.remarks}}</text>
			  			  			</view>
			  			  		</view>
								<view style="display: flex;flex-direction: column;" >
									<view style="margin-left: 60px;margin-top: 30px;" class="uni-group">
										<image @click="remove(item.id,index)" src="../../static/删除3.png" ></image>
									</view>
									<view style="margin-left: 30px;margin-top: 10px;">
										<text style="color: orange;font-size: 20px;">￥:{{item.actulPrice}}</text>
									</view>
								</view>
			  </view>
		  	</uni-card>
	  </view>
	
	  	<!-- 	<uni-table class="unitable" trapezoidal emptyText="暂无更多数据">
	  		  <uni-tr>
	  		    <uni-th width="50" align="center"></uni-th>
	  		    <uni-th width="70" align="center">商品名称</uni-th>
	  		    <uni-th width="70" align="center">商品规格</uni-th>
	  		    <uni-th width="50" align="center">小计</uni-th>
	  		    <uni-th width="50" align="center">备注</uni-th>
	  		    <uni-th width="50" align="center"></uni-th>
	  		  </uni-tr>
	  		  <uni-tr style="height: 70px;background-color: aqua;"  v-for="(item, index) in cartData" :key="index">
	  		    <uni-td >
					<image style="width: 70px;height: 50px;" :src="item.goods.imgUrl" ></image>
				</uni-td>
	  		    <uni-td  class="name" align="center">
					<view >
							{{ item.goods.name }}
					</view>
				</uni-td>
	  		    <uni-td  class="size" align="center" v-if="item.size==='L'">大杯</uni-td>
				 <uni-td  class="size" align="center" v-if="item.size==='M'">中杯</uni-td>
				  <uni-td  class="size" align="center" v-if="item.size==='S'">小杯</uni-td>
	  		    <uni-td class="actulPrice" align="center">{{ item.actulPrice }}</uni-td>
	  		    <uni-td class="remarks" align="center">{{ item.remarks }}</uni-td>
	  			<uni-td>
	  				
	  			</uni-td>
	  		  </uni-tr>
	  		</uni-table> -->
			<view style="width: 100%;" class="foot">
					<view class="mid"></view>
					<view class="xia" >
						<view class="jiesuan">
								合计: ￥{{totalPrice}}
						</view>
						<view class="goumai">
							<button type="button"@click="doSubmit" >去结算</button>
						</view>
					</view>
				</view>
			</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {onShow} from '@dcloudio/uni-app'
import { reactive, computed } from 'vue'
import moment from 'moment';

const cartData = ref([]);
const query = () => {
	uni.request({
				url: `http://wtp.qywy.cc/carts?userId=${currentUser.value.id}`,
				success: (res) => {
					console.log(res.data)
					 cartData.value = res.data;
				}
			});
  // fetch(`http://localhost:3000/carts?userId=${currentUser.value.id}`, {
  //   method: 'GET',
  // })
  //   .then((response) => {
  //     if (!response.ok) {
  //       throw new Error('Network response was not ok');
  //     }
  //     return response.json();
  //   })
  //   .then((data) => {
  //     cartData.value = data;
  //   })
  //   .catch((error) => {
  //     console.error('Fetch error:', error);
  //   });
};

onShow(() => {
	if(islogin()){
		  query();
	}
});
//当前用户
const currentUser = ref('')
const islogin = ()=>{
	const userJson = uni.getStorageSync("loginInfo")
	if(userJson){
		currentUser.value = JSON.parse(userJson)
		return true
	}else{
		uni.showToast({
			title:"您还没有登录",
			duration:2000
		})
		cartData.value=[]
		
		return false;
	}
}

// 计算总价
const totalPrice = computed(()=>{
	return cartData.value.reduce((value,item)=>{
		return value+item.actulPrice*item.count;
	},0)
})
//删除
const remove = (id,index) => {
	uni.request({
				url: `http://wtp.qywy.cc/carts/${id}`,
				method: 'DELETE',
				success: (res) => {
					uni.showToast({
						title: '已经删除' + index,
						duration: 2000
					})
					//通过数据驱动 删除dom元素
					cartData.value.splice(index,1)
	
				}
	
			})
  // fetch(`http://localhost:3000/carts/${id}`, {
  //   method: 'DELETE',
  // }).then((response) => {
  //   }).then((data) => {
  //     uni.showToast({
  //     			title:"删除成功",
  //     			duration:2000
  //     		})
  //     		cartData.value.splice(index,1)
  //   })
};
//去结算
const id1 = uni.getStorageSync("id")
const doSubmit =()=>{ 
				uni.request({
					url:"http://wtp.qywy.cc/orders",
					method:'POST',
					data:{
						userId:id1.value,
						totalPrice1:totalPrice.value,
						orderData: moment(new Date()).format('YYYY-MM-DD'),
						ispay:"0",
						items:cartData.value
					},success(res){
						uni.showToast({
									title:"订单已经生成~",
									duration:2000
								})
						//清空购物车
						cartData.value.forEach((item,index)=>{
							remove(item.id,index)
						})
						cartData.value = []
					}
					
				})
				}
</script>

<style scoped>
	.foot{
		 position: fixed;
		  top: 150px; /* 距离屏幕顶部的距离 */
	}
	.xia{
		display: flex;
		flex-direction: row;
		width: 100%;
	
	}

	      .uni-group image{
			  width: 20px;
			  height: 20px;
		  }
		  .img{
			  width: 70px;
			  height: 70px;
			  background-color: aqua;
		  }
		 .mid{
			  margin-top: 400px;
			  background-image: url('../图片/背景图片.png');
			  height:15px;
			  width: 100%;
		  }
		  .jiesuan{
			  width: 200px;
			  margin-top: 40px;
			  margin-left: 170px;
			  font-size: 20px;
			  color: orangered;
			  padding-top: 5px;
			  font-weight: bold;
		  }
		  .goumai{
			  width: 160px;
			  height: 50px;
			  /* margin-left: 180px; */
			  margin-top: 30px;
		  }
		  .goumai button{
			  background-color: orangered;
			  
		  }
		  
</style>
